<template>
  <div style="width: 1200px;margin: 0 auto;">
    <div style="width: 1200px;height: 21px">
      <span>首页></span>
      <span>详情</span>
    </div>
    <div style="width: 1200px;height: 394px" >
      <el-row>
        <el-col span="19" >
          <div style="width: 900px; height: 394px">
            <el-row>
              <el-col span="8">
                <img
                    class="item-img"
                    src="../assets/1.jpg"
                />
              </el-col>
              <el-col span="16">
                <div>
                  <div class="item-title">{{ datas.itemName }}</div>
                  <div class="item-basicDesc">
                    简介："{{ datas.basicDescription }}"
                  </div>
                  <div class="item-adress">服务范围：{{datas.adress}}</div>
                  <div class="item-adress">服务人：{{datas.workId}}</div>
                  <div class="item-date">
                    <div class="block">
                      <el-date-picker
                          v-model="value1"
                          type="date"
                          placeholder="选择日期">
                      </el-date-picker>
                    </div>
                  </div>
                  <div class="item-price">
                    <span style="color: #db0f0f;font-size: 50px">￥{{datas.price}}</span>
                  </div>
                  <Button class="item-buy" type="primary"  @click="getBuyInfo()">下单</Button>
                </div>
              </el-col>

            </el-row>
          </div>
        </el-col>
        <el-col span="5">
          <div class="note">
            <p class="note-title">
              <i class="el-icon-circle-check" style="color: red"></i>
              不支持退
            </p>
            <p class="note-info">
              票品为有价证券，非普通商品，其背后承载的文化服务具有时效性，稀缺性等特征，不支持退换。
            </p>
            <p class="note-title">
              <i class="el-icon-circle-check" style="color: red"></i>
              可选座
            </p>
            <p class="note-info">
              本项目支持自主选座<br />
              1. 选择演出时间，并点击“选座购票”进入选座页面<br />
              2. 选座后，在倒计时内支付成功，选座生效
              （先付后选的项目需要先付款，到开放选座的日期我们会短信通知，请注意查收）
            </p>
            <p class="note-title">
              <i class="el-icon-circle-check" style="color: red"></i>
              电子票
            </p>
            <p class="note-info">
              电子票：通过票夹中的二维码或身份证，可以直接验票入场（具体以下单后票夹信息为准）
            </p>
            <p class="note-title">
              <i class="el-icon-circle-check" style="color: red"></i>
              纸质发票
            </p>
            <p class="note-info">
              该项目支持开具纸质发票，请您在演出开始前通过订单页补开，发票将在演出结束后1个月左右，统一由主办方提供
            </p>
          </div>
        </el-col>
      </el-row>
<!--自我评价评论-->
      <el-row>
       <el-col span="18">
         <el-menu class="el-menu" mode="horizontal">
           <el-menu-item style="font-size: 21px"  name="1">
             <a href="#baseInfo">自我评价</a>
           </el-menu-item>
           <el-menu-item style="font-size: 21px"  name="3">
             <a href="#comment">评论</a>
           </el-menu-item>
         </el-menu>
         <div class="detail-info-base">
           <a name="baseInfo"></a>
           <p class="title">自我介绍</p>
           <div class="words">
             <div>
               <p class="item-title">基本信息</p>
               <p>介绍：{{datas.basicDescription}}</p>
             </div>
             <div>
               <p class="item-title">服务介绍</p>
               <p>介绍：{{datas.serveDescription}}</p>
             </div>
           </div>
         </div>
         <!--评论专区-->
         <a name="comment"></a>
         <div>
           <p class="title">评价</p>
           <div>打个分吧 :<el-rate v-model="userComment.score"/></div>
           <el-input v-model="userComment.comment" type="textarea" placeholder="写个评论吧"></el-input>
           <el-button class="btn" size="large" type="primary" @click="subcomm()">评论</el-button>

<!--      评论列表     -->

         </div>
       <div>

           <div>
             <div v-for="item in commentData">
               <el-avatar :size="30" ></el-avatar>
               <span>{{item.itemName}}:{{item.itemName+'12'}}</span>

               <el-rate
                   v-model="item.value"
                   show-text>
               </el-rate>
             </div>
           </div>
         </div>
       </el-col>
      </el-row>
    </div>


  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value1: '',
      value2: '',
      info: "",
      datas:{
        name:"名称",
        workId: "1",
        description:"我是简介，你好好设置",
        price:"999.0",
        adress:"成都市全域",
        serveDescription:"照办门据属转利料整族系强这持进。复矿电说任带必于身新几电何得那什。" +
            "想主规段性原调不约素称西易即而。位解据有团压定日办越日记。利各支导前油列布很果非位" +
            "三布深持点。第时阶就亲教记需调标保存算类并社。金眼技资界什容产党地证正把打在。温声" +
            "离感全叫命完值构声许六。速并接正光书总示时毛准斗听保提土。每因大少道有便报国际难" +
            "信却。图支向产种总圆值都行参门方整分段边。铁是五反后时口存进之便次根约权流构。设华" +
            "为有门中什直花象步西。适例力通可为活那马号切意程地。团阶方科厂总直步率研始矿应。据" +
            "指科当群委部都采所名天选图门日。流部单万又养观史产交你青务。与构构见质局问备长两会" +
            "县那说。内解看区也先真消交种各区中保原至取。节海经义者员心结在战况值选样合己。"
      },
      userComment:{
        comment:'',
        score:3,
        userName:'coo'
      },
      value: null,
      menudata: [
        {id: 1, itemType: '分类1'},
        {id: 2, itemType: '分类2'},
        {id: 3, itemType: '分类3'},
      ],
      bannerData: [
        {id: 1, imgUrl: require("../assets/b.png")},
        {id: 2, imgUrl: require("../assets/c.png")},
        {id: 3, imgUrl: require("../assets/d.png")},
      ],
      serviceItemDate: [
        {id: 1, title: '分类1', url: require("../assets/d.png"), price: 10, saleCount: 10},
        {id: 2, title: '分类1', url: require("../assets/d.png"), price: 10, saleCount: 10},
        {id: 3, title: '分类1', url: require("../assets/d.png"), price: 10, saleCount: 10},
        {id: 4, title: '分类1', url: require("../assets/d.png"), price: 10, saleCount: 10},
        {id: 5, title: '分类1', url: require("../assets/d.png"), price: 10, saleCount: 10},
        {id: 5, title: '分类1', url: require("../assets/d.png"), price: 10, saleCount: 10},
        {id: 5, title: '分类1', url: require("../assets/d.png"), price: 10, saleCount: 10},
        {id: 5, title: '分类1', url: require("../assets/d.png"), price: 10, saleCount: 10},
      ],
      recommend: [
        {id: 1, itemName: 'test', minPrice: '1', imgUrl: require("../assets/c.png")},
        {id: 2, itemName: 'test', minPrice: '1', imgUrl: require("../assets/d.png")},
        {id: 3, itemName: 'test', minPrice: '1', imgUrl: require("../assets/e.png")},
        {id: 4, itemName: 'test', minPrice: '1', imgUrl: require("../assets/e.png")},

      ],
      commentData:[
        {id: 1, itemName: 'test', minPrice: '1', imgUrl: require("../assets/c.png"),value:1},
        {id: 2, itemName: 'test', minPrice: '1', imgUrl: require("../assets/d.png")},
        {id: 3, itemName: 'test', minPrice: '1', imgUrl: require("../assets/e.png")},
        {id: 4, itemName: 'test', minPrice: '1', imgUrl: require("../assets/e.png")},
        {id: 5, itemName: 'test', minPrice: '1', imgUrl: require("../assets/c.png")},
        {id: 6, itemName: 'test', minPrice: '1', imgUrl: require("../assets/d.png")},
        {id: 7, itemName: 'test', minPrice: '1', imgUrl: require("../assets/e.png")},
        {id: 8, itemName: 'test', minPrice: '1', imgUrl: require("../assets/e.png")},
      ],
      order: {
        userId: "2",workerId: "10",state:1, kindsId:1, amount:100
      }
    };
  },
  methods: {
    getBuyInfo() {

      let url = 'http://localhost:9081/orders/add-new';
      console.log('url = ' + url);

      let formData = this.qs.stringify(this.order);
      console.log('formData = ' + formData);

      this.axios.post(url, formData).then((response) => {
        let responseBody = response.data;
        console.log(responseBody);
        if (responseBody.state == 20000) {
          this.$message({
            showClose: true,
            message: '下单成功！',
            type: 'success'
          });
          this.$router.push({ path: '/'})
          location.reload();

        } else {
          this.$message({
            showClose: true,
            message: responseBody.message,
            type: 'error'
          });
        }
      });


    }
    // input() {
    //   this.$forceUpdate();
    // }
  },
      mounted() {
    //this.info=this.$router.query.id;
/*
    this.info = this.$route.params.id;
*/
    //将页面传输的值保存,防止刷新
 /*   const storedParams = localStorage.getItem('myRouteParams');
    if (storedParams) {JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
      this.info = storedParams;
    } else {
      this.info = this.$route.params.id;
      localStorage.setItem('myRouteParams', this.info);
    }*/
        this.info = this.$route.params.id;
        console.log(this.info)
        //****************************************************************




  }

}
</script>

<style scoped>


.wrap {
  width: 1200px;
  align-self: center;
}

.index-content {
  height: 350px;

  /* 这里误设置了高度导致floor溢出，没有撑起应有的高度 footer布局在了tab后*/
}

.index-drop {
  display: inline-block;
  width: 200px;
  display: flex;
  justify-content: center;
  background-color: rgb(51, 49, 49);
}

.droplink {
  color: #fff;
  font-size: 18px;
}

.ivu-col .ivu-menu-item {
  font-size: 16px;
}

.fir-menu .ivu-dropdown-item {
  font-size: 16px !important;
  display: flex;
  justify-content: space-between;
}

.banner-carousal:hover {
  cursor: pointer;
}

.carousal-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  font-size: 50px;
  color: rebeccapurple;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

/*********服务展示***********/
.ivu-card-head p {
  height: 80px;
}

.tabs {
  margin-bottom: 50px;
}

.tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tab-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab-item:hover {
  cursor: pointer;
}

.item-img {
  width: 150px;
  height: 200px;
  border: none;
}

.item-itemName,
.item-price {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 10px;
  font-size: 12px;
}
.item-img {
  height: 360px;
  width: 270px;
  /* background-color: rgb(130, 145, 116); */
}
.item-title {
  font-size: 22px;
  color: #000;
}
.item-basicDesc {
  position: relative;
  font-size: 16px;
  color: #4a4a4a;
  margin: 21px 0px;
  zoom: 1;
}
.item-state {
  margin: 40px 0px;
}
.radio-item{
  margin-left: 10px;
}
.item-date,.item-adress,.item-price{
  position: relative;
  font-size: 16px;
  color: #4a4a4a;
  margin-top: 21px;
  zoom: 1;
}

.item-buy {
  margin-top: 40px;
  margin-left: 50px;
  width: 210px;
  height: 40px;
  line-height: 40px;
  background-color: #ff3c1b ;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  border-radius: 3px;
}

.note-title {
  font-size: 14px;
}
.note-info {
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}
a{
  text-decoration: none;
  color: black;
}
li,
ul {
  list-style: none;
}

.notice-list,
.detail-info-base {
  margin-bottom: 50px;
  padding: 20px;
}
.menu{
  margin-bottom: 20px;
}
.menu-title{
  font-size: 20px;
}
.notice-list .title,
.detail-info-base .title {
  padding-bottom: 14px;
  margin-bottom: 23px;
  font-size: 20px;
  color: #000;
  border-bottom: 1px solid #e2e2e2;
}
.notice-list .words .item-title {
  color: #999;
  font-size: 13px;
}
.notice-list .words p,
.detail-info-base .words p {
  font-size: 16px;
  color: #4a4a4a;
  line-height: 30px;
}
.detail-info-base .words .item-title,
.detail-info-base .words .item-name {
  font-weight: bold;
}

.notice-list .words li {
  line-height: 26px;
  padding-bottom: 15px;
  font-size: 16px;
  color: #4a4a4a;
}
.title{
  padding-bottom: 14px;
  margin-bottom: 23px;
  font-size: 20px;
  color: #000;
  border-bottom: 1px solid #e2e2e2;
}
.btn{
  background-color: #ff3c1b ;
  margin: 20px 0;
  width: 150px;
}
.page{
  margin: 20px auto;
}
</style>